<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">审核系统</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入姓名"
            style="width: 150px"
            class="className"
          ></el-input>
          <div style="position: relative">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right"></div>
      </div>
    </div>

    <div class="class-content">
      <el-table :data="tableData" style="width: 100%" class="tableMaxHeight">
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="reason" label="请假事由" align="center" />
        <el-table-column prop="roleName" label="职能" align="center" />
        <el-table-column prop="date" label="请假时间" align="center" >
           <template #default="scoped" >
            {{ scoped.row.beginTime }} 至 {{ scoped.row.endTime }}
          </template>
          </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scoped">
            <el-button link type="success" @click="() => handleEdit(scoped.row)">通过</el-button>
            <el-button link type="danger" @click="handleBusinessClassDetail(scoped.row)">不通过</el-button>
            <el-button link type="primary" @click="() => handleEdit1(scoped.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentPageChange"
        />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
</div>


      </div>
      <el-drawer  v-model="dialogVisible" title="请假详情信息" size="700" :show-close="false" style="background-color:#F0F8FF;height:100%">
      <div class="richang">
        <div class="name">
          <span class="name1">姓 名：</span>
          <span class="name2">{{ selectedRow.userName }}</span>
        </div>
        <div class="name">
          <span class="name1">职 能：</span>
          <span class="name2">{{ selectedRow.roleName }}</span>
        </div>
        <div class="name">
          <span class="name1">开始时间：</span>
          <span class="name2">{{ selectedRow.beginTime }}</span>
        </div>
        <div class="date">
          <span class="date1">结束时间：</span>
          <span class="date2">{{ selectedRow.endTime }}</span>
        </div>
        <div class="name">
          <span class="name1">请假时长：</span>
          <span class="name2">{{ selectedRow.totalTime }}</span>
        </div>
        <div class="content">
          <span class="content1">请假事由：</span>
          <span class="content2" v-html="selectedRow.reason"></span>
        </div>


       
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false"  class="confirm">关闭</el-button>
      </template>
    </el-drawer >
    </div>
  </div>
</template>
  
<script setup>
import { ref,onMounted } from 'vue'
import {getExamineList,examineLeave} from '../api/Examine'
import { ElMessage,ElMessageBox } from 'element-plus'

// 表格数据
const tableData = ref([])
// 分页相关
const currentPage = ref(1) // 当前页码
const pageSize = ref(7) // 每页显示的记录数
const total = ref(0) // 总记录数

const dialogVisible = ref(false) // 控制抽屉的显示与隐藏

// 搜索输入框的值
const classSearchInput = ref('') // 搜索输入框的值
//本地数据
const user = JSON.parse(localStorage.getItem('user'))

//点击按钮状态
const buttonStatus = ref(0) // 0: 不通过，1: 通过

// 初始化数据
function fetchData() {
    let data = {
        pageIndex: currentPage.value,
        pageSize: pageSize.value,
        userName: classSearchInput.value, // 传递搜索输入框的值
    }
    if(user.roleId == '3'){
        data.userId = user.userId;
    }
    getExamineList("checkLeavesList",data).then((res) => {
        if (res.code === 200) {
            tableData.value = res.dataset.leaveList
            total.value = res.dataset.pageCount * pageSize.value // 总记录数
        }
    })
}

// 页面加载时获取数据
onMounted(() => {
    fetchData() // 初始加载数据
})
// 处理当前页变化
const handleCurrentPageChange = (value) => {
  currentPage.value = value
  fetchData(currentPage.value,pageSize.value,classSearchInput.value)
}

//搜索
const handleSearch = () => {
  currentPage.value = 1; // 重置页码为1
  fetchData(currentPage.value,pageSize.value,classSearchInput.value)  
}

//审核请假接口
function ExamineLeave (row) {
    let data = {
        leaveId: row.leaveId, // 假条ID
    }
    //判断点击的按钮是通过还是不通过
    if (buttonStatus.value == 0) { // 不通过
        data.status = 0; 
    } else if (buttonStatus.value == 1) { // 通过
        data.status = 1;
    }
    examineLeave("checkLeave",data).then((res) => {
        if (res.code === 200) {
            ElMessage({
                message: '审核成功',
                type: 'success',
              }) 
              fetchData() // 刷新数据
        } 
    })
    
}

//点击通过
const handleEdit = (row) => {
  ElMessageBox.confirm('确定通过该条假条吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning', 
  }).then(() => {
    // 点击确定后的操作
    buttonStatus.value = 1; // 设置按钮状态为通过
    ExamineLeave(row); // 调用审核假条接口 
  }).catch(() => {
    // 点击取消后的操作
    ElMessage({
      type: 'info',
      message: '已取消操作',
    });
  });

}
// 点击不通过
const handleBusinessClassDetail = (row) => {
  ElMessageBox.confirm('确定不通过该条假条吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning', // 设置为警告类型 
  }).then(() => {
    // 点击确定后的操作
    buttonStatus.value = 0; // 设置按钮状态为不通过
    ExamineLeave(row); // 调用审核假条接口 
  }).catch(() => {
    // 点击取消后的操作
    ElMessage({
      type: 'info',
      message: '已取消操作',
    });
  });
}

const selectedRow = ref(null) // 选中的行数据

// 点击详情
const handleEdit1 = (row) => {
  selectedRow.value = row; // 将选中的行数据赋值给 selectedRow
  dialogVisible.value = true; // 显示抽屉
}

function handleChange() {
  currentPage.value = 1; // 重置页码为1
  fetchData(currentPage.value,pageSize.value,classSearchInput.value)
}



</script>
  
<style scoped>
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
:deep(.className .el-input__wrapper){
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
/* 报告不能换行 */
:deep(.el-table__body-wrapper .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;

}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
.tableMaxHeight {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}
:deep(.el-drawer header) {
  background-color: #0f6ab1;
  margin-bottom: 0;
  padding-bottom: 20px;
}
:deep(.el-drawer header span) {
  color: white;
}

:deep(.el-drawer__header span){
  text-align: center;
  color: black;
  font-size: 20px;
}
:deep(.w-e-scroll p) {
  margin: 0;
}
:deep(.confirm) {
  color: white;
  margin-left: 50px;
  background-color: #0f6ab1;
}
.name,
.content,
.date {
  color: black;
  font-size: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
}
</style>